import { provide, onMounted, inject } from 'vue'
const themeList = [
  { title: '深海蓝', name: 'light', color: '#0052d9' },
  { title: '天空蓝', name: 'lightblue', color: '#0894fa' },
  { title: '明亮黄', name: 'yellow', color: '#f3b814' },
  { title: '淡然紫', name: 'purple', color: '#7a5af8' },
  { title: '可爱粉', name: 'pink', color: '#ef45b3' },
  { title: '超甜橘', name: 'orange', color: '#f54343' },
  { title: '自然棕', name: 'brown', color: '#c9724f' },
  { title: '草色青', name: 'ching', color: '#27ba93' }
]
// 在APP组件设置主题，在任何页面刷新都能显示正常，避免出现在登录页面刷新无效的情况
export function useTheme () {
  let themeMode = localStorage.getItem('themeMode') || ''
  provide('theme', {
    setTheme (mode) {
      // 设置主题模式
      document.documentElement.setAttribute('class', mode)
      localStorage.setItem('themeMode', mode)
      themeMode = mode
    },
    currTheme: themeMode
  })
  onMounted(() => {
    console.log(2)
    if (themeMode) document.documentElement.setAttribute('class', themeMode)
  })
}
// 在任何组件都可以调用修改当前主题
export function useSetTheme () {
  const theme = inject('theme')
  function themeChange (mode) {
    theme.setTheme(mode)
  }
  return {
    themeChange,
    currTheme: theme.currTheme,
    themeList
  }
}
